import React, { useEffect, useState } from 'react'
import './style.css'
import '../../font/font.css'
import PropTypes from 'prop-types';
import { DigitalFlop } from '@jiaminghi/data-view-react'



const Index = (props) => {
  const { text, num, imgs, adds } = props;
  const [classNames, setClass] = useState("")
  const [config, setConfig] = useState({
    number: [240],
    content: '{nt}'
  })
  useEffect(() => {
    console.log(imgs, text)
    setConfig({
      ...config,
      number: [Number(num)]
    })
    if (adds == 1) {
      setClass("compon1")
    } else if (adds == 2) {
      setClass("compon2")
    } else if (adds == 3) {
      setClass("coms1")
    } else if (adds == 4) {
      setClass("coms2")
    }
  }, [])
  return (
    <div className={classNames}>
      <div className="img">
        <img src={require(`../../assets/${imgs}`)} alt="" />
      </div>

      <div className="comtend">
        <span className="title" style={{ fontSize: "12" }}>{text ? text : "暂无"}</span>
        <span className="h3" style={{ color: "#07e4f6", fontFamily: 'start' }}>
          <DigitalFlop config={config} style={{ width: '100%', height: '100%', textAlign: "left" }} />
        </span>
      </div>
    </div>

  )
}

Index.propTypes = {
  title: PropTypes.string,
  num: PropTypes.number,
};
Index.defaultProps = {
  title: "2020年体检数",
  num: 263,
  icon: require("../../assets/bg(2).svg")
}

export default Index
